<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background-color: grey;
			}
			#app{
				width: 500px;
				height: 800px;
				border: 1px solid white;
				margin: 50px auto;
			}
			#d1{
				width: 100%;
				height: 400px;
				line-height: 400px;
				font-size: 250px;
				text-align: center;
				color: white;
				background-color: pink;
			}
			#d2{
				width: 100%;
				height: 200px;
				background-color: white;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			#start{
				width: 250px;
				height: 100px;
				border: none;
				font-size: 50px;
				border-radius: 100%;
				background-color: #003399;
				color: white;
			}
			#d3{
				width: 100%;
				height: 200px;
				background-color: blue;
				display: flex;
				align-items: center;
				justify-content: space-around;
			}
			#d3 button{
				border-radius: 100%;
				width: 150px;
				height: 150px;
			}
			.none{
				display: none;
			}
			#d3>button{
				opacity: 0;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="d1">
				<p id="p1">5</p>
				<!-- <p id="p2" class="none"></p> -->
			</div>
			<div id="d2">
				<button type="button" id="start">开始</button>
			</div>
			<div id="d3">
				<button type="button" id="max">大</button>
				<button type="button" id="min">小</button>
			</div>
		</div>
		<script type="text/javascript">
			var p1=document.getElementById("p1");
			// var p2=document.getElementById("p2");
			var start=document.getElementById("start");
			var max=document.getElementById("max");
			var min=document.getElementById("min");
			
			max.onclick=function(){
				f=true;
			}
			min.onclick=function(){
				r=true;
			}
			start.onclick=function(){
				var i=5;
				var t=setInterval(function(){
					i>0?i--:clearInterval(t);
					p1.innerHTML=i;
				},1000);
				var q=setTimeout(function(){
					if(f){
						var n=Math.ceil(((6-3)*Math.random()+3));
						console.log("n:",n);	
						p1.innerHTML=n;
					}else if(r){
						var m=Math.ceil(Math.random()*3);
						console.log("m:",m);
						p1.innerHTML=m;
					}else{
						var b=Math.ceil(Math.random()*6);
						console.log("b:",b);
						p1.innerHTML=b;
					}
				},6000);
			}
			
		</script>
	</body>
</html>
